<template>
   <div>
    <div class="popular_doctor" v-for="obj in DoctorMsg" :key="obj.id">
        <div class="doctor_icon">
          <img :src="obj.icon" alt="" />
          <div class="doctor_starLevel">
            <img src="../../static/images/home/star.png" alt="" />
            <span>{{ obj.starLevel }}</span>
          </div>
        </div>
        <div class="doctor_msg">
          <div>
            <div class="doctor_name">
              {{ obj.name }}
            </div>
            <div class="doctor_professionalField">
              {{ obj.professionalField }}
            </div>
          </div>
          <div class="doctor_location">{{ obj.location }}</div>
        </div>
      </div>
   </div>
</template>

<script>
export default {
  props:{
    DoctorMsg:{
      type:Array
    }
  },
  data () {
    return { }
  },
  components: { },
  methods: { },
}
</script>

<style lang='scss' scoped>
.popular_doctor {
    display: flex;
    height: 176rpx;
    margin-top: 32rpx;
    margin-bottom: 60rpx;

    .doctor_icon {
      position: relative;
      width: 176rpx;
      height: 176rpx;
      background: rgb(96, 107, 177);
      border-radius: 24rpx;

      // overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }

      .doctor_starLevel {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        width: 130rpx;
        height: 60rpx;
        background: rgb(23, 23, 37);
        border-radius: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 26.68rpx;
          height: 25.34rpx;
          margin-right: 10.66rpx;
        }

        span {
          color: rgb(254, 254, 254);
          font-family: Plus Jakarta Sans;
          font-size: 24rpx;
          font-weight: 600;
          line-height: 40rpx;
          letter-spacing: 0.004999999888241291%;
          text-align: left;
        }
      }
    }

    .doctor_msg {
      display: flex;
      flex-direction: column;
      // align-items: c;
      justify-content: space-between;
      margin-left: 32rpx;
      font-family: Plus Jakarta Sans;
      letter-spacing: 0.004999999888241291%;
      text-align: left;

      .doctor_name {
        color: rgb(23, 23, 37);
        font-size: 32rpx;
        font-weight: 700;
        line-height: 48rpx;
      }

      .doctor_professionalField {
        margin-top: 10rpx;
        color: rgb(120, 130, 138);
        font-size: 24rpx;
        font-weight: 600;
        line-height: 40rpx;
      }

      .doctor_location {
        display: flex;
        align-items: center;
        color: rgb(67, 78, 88);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 40rpx;

        &::before {
          content: "";
          display: block;
          margin-right: 16rpx;
          width: 32rpx;
          height: 32rpx;
          background: url("../../static/images/home/bxs-map.png");
        }
      }
    }
  }
</style>
